<template>
  <view class="password-reset-container">
    <form @submit.prevent="handleSubmit">
      <!-- 旧密码 -->
      <div class="form-group">
        <label for="oldPassword">旧密码</label>
        <input type="password" id="oldPassword" v-model="oldPassword" required />
      </div>

      <!-- 新密码 -->
      <div class="form-group">
        <label for="newPassword">新密码</label>
        <input type="password" id="newPassword" v-model="newPassword" required />
      </div>

      <!-- 确认新密码 -->
      <div class="form-group">
        <label for="confirmPassword">确认新密码</label>
        <input type="password" id="confirmPassword" v-model="confirmPassword" required />
      </div>

      <!-- 错误信息显示 -->
      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>

      <!-- 提交按钮 -->
      <button type="submit">提交</button>
    </form>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 表单数据绑定
const oldPassword = ref('1232325435');
const newPassword = ref('');
const confirmPassword = ref('');

// 错误信息
const errorMessage = ref('');

// 处理表单提交
const handleSubmit = () => {
  // 验证新密码与确认新密码是否一致
  if (newPassword.value !== confirmPassword.value) {
    errorMessage.value = '新密码和确认密码不匹配，请重新输入';
    return;
  }

  // 这里可以添加实际的密码修改逻辑，例如调用API更新密码
  console.log('准备提交的数据:', {
    oldPassword: oldPassword.value,
    newPassword: newPassword.value,
  });

  // 清空错误信息
  errorMessage.value = '';

  // 模拟成功提示（实际应用中应替换为真实的反馈）
  alert('密码修改成功！');
  
  // 清空表单
  oldPassword.value = '';
  newPassword.value = '';
  confirmPassword.value = '';
};
</script>

<style scoped lang="scss">
.password-reset-container {
  margin: 50rpx 50rpx;
  padding: 20rpx;
  border: 1px solid #e5e5e5;
  border-radius: 20rpx;
  background-color: $uni-bg-color;

  h2 {
    text-align: center;
    margin-bottom: 20rpx;
  }

  .form-group {
    margin-bottom: 15rpx;

    label {
      display: block;
      margin-bottom: 15rpx;
    }

    input {
      width: 100%;
      box-sizing: border-box;
	 border: 1rpx solid #e5e5e5;
    }
  }

  .error-message {
    color: red;
    margin-bottom: 10rpx;
  }

  button {
    margin: 40rpx;
    padding: 4rpx;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: #45a049;
    }
  }
}
</style>